<template>
    <div id="pay">
        <div class="msg">
            <p>订单提交成功</p>
        </div>
        <div class="button">
            <van-button type="primary" @click="pay">立即支付</van-button>
            <van-button type="default" @click="go">查看我的订单</van-button>
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance } from "vue";

    const {proxy} = getCurrentInstance();
    const userInfo = proxy.$cookies.get("business")?proxy.$cookies.get("business"):{}
    let id = proxy.$route.query.id?proxy.$route.query.id:"";

    // 支付
    const pay = async ()=>{
        proxy.$dialog({
            title:"提醒",
            message:"确认要立即支付吗?"
        }).then(async()=>{
            let data = {
                // 订单id
                orderid:id,
                // 用户id
                busid:userInfo.id
            }
            let result = await proxy.$POST({
                url:"/cart/payOrder",
                params:data,
            })
            console.log(result)
            if(result.code){
                proxy.$success({
                    message:result.msg,
                    duration:1000,
                    onClose:()=>{
                        proxy.$router.push("/order/index");
                    }
                })
            }else{
                proxy.$fail(result.msg)
                return false
            }
        }).catch(err=>{
            console.log(err)
        })
    }

    // 查看我的订单界面
    const go = ()=>{
        proxy.$router.push("/order/index");
    }
</script>

<style>
    #pay{
        padding: .625rem;
    }
    #pay .msg{
        margin: 0 auto;
        width: 6.25rem;
        height: 6.25rem;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--van-button-success-background);
        color: #fff;
        font-size: 1rem;
    }

    .button{
        margin-top: 10px;
        display: flex;
        flex-direction: column;
    }

    #pay .van-button{
        margin: 10px 0;
    }
</style>